<template>
  <div>
    <!--tab切换区域-->
    <Tabs :option="tabsOption" @change="changeTabsMethods"></Tabs>
    <div class="tabsChangeContent">
      <!--余额查询-->
      <div v-show="changeTabOption.prop===0">
        <SimpleData :simpleData="balanceAccountData" :option="balanceOption"></SimpleData>
      </div>
      <!--明细查询-->
      <div v-show="changeTabOption.prop===1">
        <CommonTable
          :option="detailSearchOption"
          :buttonSelf="detailButtonArray"
          :data="detailSearchData"
          :page="pageDetailDetailSearch"
          @selfButton="selfButtonDetail"
          @search="search"
          @sizeChange="sizeChangeDetailSearch"
          @currentChange="currentChangeDetailSearch">
        </CommonTable>
      </div>
      <!--子账户查询-->
      <div v-show="changeTabOption.prop===2">
        <CommonTable
          :option="subAccountOption"
          :data="subAccountData"
          :page="pageDetailSubAccount"
          @search="querySubBank"
          @sizeChange="sizeChangeSubAccount"
          @currentChange="currentChangeSubAccount">
        </CommonTable>
      </div>
    </div>
  </div>
</template>

<script>
  import Axios from 'axios'
  import $ from 'jquery'
  import InformationCompany from '@/components/common/InformationCompany'
  import Tabs from '@/components/common/Tabs'
  import SimpleData from '@/components/common/SimpleData'
  import CommonTable from '@/components/common/CommonTable'
  import ChildDropDown from '@/components/common/DropDownLoad'
  import {queryLoss} from '@/api/bankBiz/loss/loss'

  export default {
    name: 'AccInfo',
    components: {
      Tabs,
      SimpleData,
      CommonTable
    },
    data () {
      return {
        tabsOption: {
          column: [
            {
              label: '余额查询',
              prop: 0
            }, {
              label: '明细查询',
              prop: 1
            },
            {
              label: '子账户查询',
              prop: 2
            }
          ]
        },
        listInfoDetailData: {},
        changeTabOption: {},
        iconPic: ['el-icon-caret-top','color-red'],
        // 余额查询
        balanceAccountData:  {
          'currency': '币种',
          'balance': '余额',
          'availableBalance': '可用余额'
        },
        balanceOption: {
          column: [
            {
              'prop': 'currency',
              'label': '币种',
              'span': 8
            },
            {
              'prop': 'balance',
              'label': '余额',
              'span': 8
            },
            {
              'prop': 'availableBalance',
              'label': '可用余额',
              'span': 8
            }
          ]
        },
        // 明细查询
        detailSearchOption: {},
        detailSearchData: [],
        detailButtonArray: [
          {
            label: '最近10笔',
            prop: 0
          },
          {
            label: '最近10日',
            prop: 1
          }
        ],
        // 子账户查询
        subAccountData: [],
        subAccountOption: {},
        pageDetailDetailSearch: {
          pageSizes: [10, 20, 30, 40],
          currentPage: 1,
          total: 10,
          pageSize: 10
        },
        pageDetailSubAccount: {
          pageSizes: [10, 20, 30, 40],
          currentPage: 1,
          total: 10,
          pageSize: 10
        }
      }
    },
    created () {
      $(".show-icon").show()
      this.changeTabOption.prop = 0
      // 明细查询条件配置
      this.setQueryConditionOption()
      // 子账户查询条件配置
      this.setSubAccountOption()
      // 余额查询
      this.quertyBalanceData()
      // 明细查询
      this.search()
      // 子账户查询
      this.querySubBank()
    },
    methods: {
      changeTabsMethods (data) {
        this.changeTabOption = data
        // this.$message.success(JSON.stringify(data))
      },
      // 余额查询
      quertyBalanceData () {
        return
        // 调接口
        let balanceAccountParams = {
          namespace: "Company",
          key: "balanceAccountData"
        }
        queryLoss(balanceAccountParams).then((res) => {
          if(res.data.code == 200){
            this.balanceAccountData = res.data.data
          }else{
            this.balanceAccountData = {}
            window.globalUiKit.notify('提示', res.data.message, 'error')
          }
        })
      },
      // 明细查询条件配置
      setQueryConditionOption () {
        Axios.post('/api/company').then((res) => {
          this.detailSearchOption = res.data.detailSearchOption
        }).catch((err) => {
          console.log(err)
        })
      },
      // 明细查询
      search () {
        // 调接口
        let detailSearchParams = {
          namespace: "Company",
          key: "detailSearchData",
          query: {
            pageSize: 10,
            currentPage: 1,
            transferDateStart: "2020-01-01",
            transferDateEnd: "2020-01-02"
          }
        }
        queryLoss(detailSearchParams).then((res) => {
          if(res.data.code == 200){
            this.pageDetailDetailSearch.total = res.data.data.totalNum
            this.detailSearchData = res.data.data.dataObj
          }else{
            this.pageDetailDetailSearch.total = 0
            this.detailSearchData = []
            window.globalUiKit.notify('提示', res.data.message, 'error')
          }

        })
      },
      // 自定按钮事件
      selfButtonDetail (prop) {
        // 最近10笔
        if (prop == this.detailButtonArray[0].prop) {
          console.log('触发最近10笔查询')
        }
        // 最近10日
        else if (prop == this.detailButtonArray[1].prop) {
          console.log('触发最近10日查询')
        }
      },
      // 子账户查询配置
      setSubAccountOption () {
        Axios.post('/api/company').then((res) => {
          this.subAccountOption = res.data.subAccountOption
        }).catch((err) => {
          console.log(err)
        })
      },
      // 子账户查询
      querySubBank () {
        // 调接口
        let subAccountParams = {
          namespace: "Company",
          key: "subAccountData",
          query: {
            pageSize: 10,
            currentPage: 1,
            accountType: "A",
            currency: "美元",
            saveTime: "10年",
            openingDateStart: "2020-01-01",
            openingDateEnd: "2020-01-01"
          }
        }
        queryLoss(subAccountParams).then((res) => {
          if(res.data.code == 200){
            this.pageDetailSubAccount.total = res.data.data.totalNum
            this.subAccountData = res.data.data.dataObj
          }else{
            this.pageDetailSubAccount.total = 0
            this.subAccountData = []
            window.globalUiKit.notify('提示', res.data.message, 'error')
          }
        })
      },
      // 明细查询数据,切换行数
      sizeChangeDetailSearch(val) {
        this.pageDetailDetailSearch.currentPage = 1
        this.pageDetailDetailSearch.pageSize = val
        this.$message.success('行数' + val)
        // 调接口
        let detailSearchParams = {
          namespace: "Company",
          key: "detailSearchData",
          query: {
            pageSize: val,
            currentPage: 1,
            transferDateStart: "2020-01-01",
            transferDateEnd: "2020-01-02"
          }
        }
        queryLoss(detailSearchParams).then((res) => {
          if(res.data.code == 200){
            this.pageDetailDetailSearch.total = res.data.data.totalNum
            this.detailSearchData = res.data.data.dataObj
          }else{
            this.pageDetailDetailSearch.total = 0
            this.detailSearchData = []
            window.globalUiKit.notify('提示', res.data.message, 'error')
          }
        })
      },
      // 明细查询数据,切换页码
      currentChangeDetailSearch(val) {
        this.pageDetailDetailSearch.currentPage = val
        this.$message.success('页码' + val)
        // 调接口
        let detailSearchParams = {
          namespace: "Company",
          key: "detailSearchData",
          query: {
            pageSize: this.pageDetailDetailSearch.pageSize,
            currentPage: val,
            transferDateStart: "2020-01-01",
            transferDateEnd: "2020-01-02"
          }
        }
        queryLoss(detailSearchParams).then((res) => {
          if(res.data.code == 200){
            this.pageDetailDetailSearch.total = res.data.data.totalNum
            this.detailSearchData = res.data.data.dataObj
          }else{
            this.pageDetailDetailSearch.total = 0
            this.detailSearchData = []
            window.globalUiKit.notify('提示', res.data.message, 'error')
          }
        })
      },
      // 子账户查询数据,切换行数
      sizeChangeSubAccount(val) {
        this.pageDetailSubAccount.currentPage = 1
        this.pageDetailSubAccount.pageSize = val
        this.$message.success('行数' + val)
        // 调接口
        let subAccountParams = {
          namespace: "Company",
          key: "subAccountData",
          query: {
            pageSize: val,
            currentPage: 1,
            accountType: "A",
            currency: "美元",
            saveTime: "10年",
            openingDateStart: "2020-01-01",
            openingDateEnd: "2020-01-01"
          }
        }
        queryLoss(subAccountParams).then((res) => {
          if(res.data.code == 200){
            this.pageDetailSubAccount.total = res.data.data.totalNum
            this.subAccountData = res.data.data.dataObj
          }else{
            this.pageDetailSubAccount.total = 0
            this.subAccountData = []
            window.globalUiKit.notify('提示', res.data.message, 'error')
          }
        })
      },
      // 子账户查询数据,切换页码
      currentChangeSubAccount(val) {
        this.pageDetailSubAccount.currentPage = val
        this.$message.success('页码' + val)
        // 调接口
        let subAccountParams = {
          namespace: "Company",
          key: "subAccountData",
          query: {
            pageSize: this.pageDetailSubAccount.pageSize,
            currentPage: val,
            accountType: "A",
            currency: "美元",
            saveTime: "10年",
            openingDateStart: "2020-01-01",
            openingDateEnd: "2020-01-01"
          }
        }
        queryLoss(subAccountParams).then((res) => {
          if(res.data.code == 200){
            this.pageDetailSubAccount.total = res.data.data.totalNum
            this.subAccountData = res.data.data.dataObj
          }else{
            this.pageDetailSubAccount.total = 0
            this.subAccountData = []
            window.globalUiKit.notify('提示', res.data.message, 'error')
          }
        })
      }
    }
  }
</script>

<style>
  .accTitle{line-height: 50px;}
  .companyBox .avue-group__item{padding: 0 !important;}
  .companyBox .avue-form__group > div{padding: 0 !important;}
  .dropDownLoadWrap{border:1px #eee solid;margin-top: 20px;}
  /*子模块区域*/
  .inlineStyle {
    width: 100px;
    display: inline-block;
    text-align: center;
  }
  .inlineStyle span {
    text-align: center;
    display: block;
  }
  .sonArea img {
    width: 70px;
    height: 70px;
  }
</style>
